<div nz-row [nzJustify]="'end'" class="btn-group" [nzGutter]="15">
  <div nz-col [nzXs]="20" [nzSm]="20">
    <nz-input-group [nzSuffix]="suffixTemplate">
      <input nz-input placeholder="过滤: 名字/值" [(ngModel)]="filter"/>
    </nz-input-group>
  </div>
  <ng-template #suffixTemplate>
    <i nz-icon [nzType]="'close'" (click)="filter = null"></i>
  </ng-template>
  <div nz-col [nzXs]="4" [nzSm]="4">
    <nz-button-group>
      <button nz-button [nzType]="!isFolded?'primary':'default'" (click)="foldBtnEvent(false)">展开</button>
      <button nz-button [nzType]="isFolded?'primary':'default'" (click)="foldBtnEvent(true)">折叠</button>
      <button nz-button (click)="query()">刷新</button>
    </nz-button-group>
  </div>
</div>
<div nz-row class="panels-div">
  <div nz-col [nzXs]="24" [nzSm]="24">

    <nz-collapse [nzBordered]="false">
      <nz-collapse-panel *ngFor="let panel of computedVariable" [nzHeader]="headerTemplate"
                         [nzActive]="!panel.isFolded">
        <ng-template #headerTemplate>
          <div>{{panel.variableName}} <span nz-typography nzType="secondary">{{panel.pid}}</span>
            <span class="secondary-header" nz-typography nzType="secondary">{{panel.variableValue}}</span></div>
        </ng-template>
        <nz-spin [nzSpinning]="loading" [nzDelay]="500">
          <p>{{ panel.remark }}  </p>
          <nz-input-group nzSearch [nzAddOnAfter]="suffixButton" [nzSuffix]="inputLengthTemplate">
            <input type="text" [(ngModel)]="panel.variableValue" nz-input placeholder="input value"/>
          </nz-input-group>
          <ng-template #inputLengthTemplate>
            <span nz-typography nzType="secondary">{{panel.variableValue.length}}</span>
          </ng-template>
          <ng-template #suffixButton>
            <button nz-button nzType="primary" nzSize="small" nzSearch (click)="save(panel)">保存</button>
          </ng-template>
        </nz-spin>
      </nz-collapse-panel>
    </nz-collapse>
  </div>
</div>
